<template>
  <div class="my-card">
    <img :src="book.img" alt="book-img">
    <p>{{book.desc}}</p>
    <div :style="{color: $store.state.mainColor}">
        <span>{{book.name}}</span>
        <span @click="addStore" class="iconfont iconicon_tips_wrong"></span>
    </div>
 </div>
</template>

<script>
import { useStore } from 'vuex'
export default {
    props: {
        book: Object
    },

    setup(props) {
        // console.log(props);
        let store = useStore()
        function addStore() {
            store.commit('addBook', props.book)
        }
        
        return {
            addStore
        }
    }
 }
</script>

<style scoped lang="scss">
img {
    width: 100%;
    height: 160px;
}
p {
    width: 150px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    text-indent: 2em;
    font-size: 14px;
    color: #888;
}
.my-card div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .iconfont {
        font-size: 20px;
        transform: rotate(45deg);
    }
}
</style>